<template>
    <div class="goodsBasic">
        <van-cell-group inset>
            <van-cell>
                <template #title>
                    <p class="price">
                        <span class="price_icon">￥</span>
                        <span class="sale_price">
                            {{ goodsDes.sale_price || goodsDes.price }}
                        </span>
                        <span class="ori_price" v-if="goodsDes.sale_price ? true : false">
                            ￥{{ goodsDes.price }}
                        </span>
                    </p>
                </template>
                <template #label>
                    <div class="goods_title">
                        <p class="goods_name">{{ goodsDes.name }}</p>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script setup>
defineProps({
    goodsDes: Object,
});
</script>

<style lang="scss" scoped>
@import '../../../style/base.scss';
.goodsBasic {
    .price {
        padding-top: 0.1rem;
        @include flexSet(flex-start, center, center);
        .sale_price {
            margin: 0;
            font-size: 0.3rem;
            color: #e4393c;
        }
        .ori_price {
            margin: 0 0.1rem 0;
            font-size: 0.14rem;
            color: #bebebe;
            text-decoration: line-through;
        }
        .price_icon {
            margin: 0;
            font-size: 0.2rem;
            color: #e4393c;
        }
    }
    .goods_title {
        margin-top: 0.2rem;
        margin-bottom: 0.05rem;
        width: 100%;
        height: 0.48rem;
        .goods_name {
            margin: 0;
            font-size: 0.14rem;
            line-height: 0.24rem;
            color: #555555;
            font-weight: 600;
        }
    }
}
</style>
